<template>
  <ListPage ref="page" :query="query" :api="getSuggestionDetailList">
    <template #search="{ page, hiddenColumns }">
      <PageSearch ref="search" :query="query" :page="page" has-box @search="() => ($refs.page as any).getData()">
        <template #auth>
          <ElButton type="success" @click="openZdycx">自定义查询</ElButton>
        </template>
        <template #input="{}">
          <SearchInput v-model="query.keyword" placeholder="登记时间/投诉客户对接群名/投诉客户名称" :data="query"
                       :hidden-columns="(hiddenColumns as any)" @trigger="(e) => ($refs.search as any).trigger(e)"
                       @search="() => ($refs.page as any).getData()"
                       @change-column="(prop) => ($refs.page as any).changeColumn(prop)"></SearchInput>
        </template>

      </PageSearch>
    </template>

    <template #table="{ data, hiddenColumns }">
      <ListTable :data="data" :hidden-columns="(hiddenColumns as any)" @edit-complaint="onEditComplaint"
                 @add-complaintDetail="onAddComplaintDetail">
      </ListTable>
    </template>
    <template #pagination="{ page, total }">
      <PagePagination
          :page="page"
          :total="total"
          @changePage="(v) => ($refs.page as any).changePage(v)">
      </PagePagination>
    </template>
  </ListPage>
  <CustomizeQuery :zdycxObj="zdycxObj" moduleName="投诉明细" @query-data="queryData"></CustomizeQuery>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeMount, nextTick } from 'vue'
import ListPage from '@/components/list-page/ListPage.vue'
import {getSuggestionDetailList, getTsmx} from '../api'
import ListTable from './ListTable.vue'
import PageSearch from '@/components/list-page/PageSearch.vue'
import SearchInput from '@/components/list-page/SearchInput.vue'
import { useAuth } from '@/utils/auth'
import { editDialog ,addDetailDialog} from '../dialog/complaintSuggestionDetailDialog.ts'
import PagePagination from '@/components/list-page/PagePagination.vue'
import {ElMessage} from "element-plus";
import CustomizeQuery from "@/views/menus/n-ykf-customize-query/components/index.vue";
import { useRoute } from 'vue-router'
import dayjs from "dayjs";

const route = useRoute()
const page = ref()

const query = reactive({
  keyword: '',
  customerName: '',
  customizeQueryCondition: [],
  complaintId: '',
})

const auth = useAuth()

const onAddComplaintDetail = async (row) => {
  const complaintId = row.complaintId;
  console.log("11111111")
  if (!complaintId) {
    ElMessage.warning('该行数据缺少 complaintId');
    return;
  }
  const djsj = dayjs(row.customerComplaintRegistrationEntity.djsj).format('YYYY-MM-DD HH:mm:ss');
  console.log(djsj)
  const data = await getTsmx({'djsj': djsj})
  const now = dayjs();
  const minJqsj = dayjs(data.minJqsj);
  const diffHours = now.diff(minJqsj, 'hour');
  if (data.count > 0 && diffHours > 48){
    ElMessage.warning('已超过 48 小时，新增投诉明细表格为红色');
    await addDetailDialog.title('新增投诉明细').open({ row: {complaintId, isAdd: true } })
    // 刷新数据
    page.value && page.value.getData()
    return;
  }
  await addDetailDialog.title('新增投诉明细').open({ row: {complaintId, isAdd: true } })
  console.log(row.complaintId)
  // 刷新数据
  page.value && page.value.getData()
}

const onEditComplaint = async (row) => {
  await editDialog.title('编辑投诉明细').open({ row })
  // 刷新数据
  page.value && page.value.getData();
}

const zdycxObj = reactive({
  isShow: false,
})

const openZdycx = async () => {
  zdycxObj.isShow = true;
}

const queryData = async (customizeQueryCondition) => {
  zdycxObj.isShow = false;
  query.customizeQueryCondition = customizeQueryCondition;
  page.value?.getData()
}

// 初始化 query 的时候读取路由参数
onBeforeMount(() => {
  const complaintIdFromRoute = route.query.complaintId

  if (complaintIdFromRoute) {
    query.complaintId = String(complaintIdFromRoute)

    console.log('complaintIdFromRoute11111', complaintIdFromRoute)

    // 手动调用 ListPage 的 getData 方法
    nextTick(() => {
      page.value?.getData()
    })
  }
})

</script>